<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--设备树-->
			<el-col :span="4" :xs="24">
				<div class="head-container">
					<el-tree :data="deviceOptions" :props="defaultProps" :expand-on-click-node="false" node-key="id"
						:current-node-key="currentNodeKey" :filter-node-method="filterNode" ref="tree"
						default-expand-all highlight-current @node-click="handleNodeClick" />
				</div>
			</el-col>
			<!--设备详情-->
			<el-col :span="20" :xs="24">
				<el-row :gutter="20">
					<el-col :span="2" :xs="24">
						<span class="nowrap">刷新间隔</span>
					</el-col>
					<el-col :span="4" :xs="24">
						<el-input v-model="interval" />
					</el-col>
					<el-col :span="1" :xs="24">
						<span>秒</span>
					</el-col>
					<el-col :span="3" :xs="24">
						<el-button type="primary" size="small" @click="startInterval">定时刷新</el-button>
					</el-col>
					<el-col :span="14" :xs="24">
						<el-button type="primary" icon="el-icon-refresh" size="small" @click="refresh">刷新</el-button>
					</el-col>
				</el-row>
				<el-row :gutter="20" class="mt-20" v-for="(arr,index) in items" :key="index">
					<el-col :sm="24/rowSize" :lg="24/rowSize" v-for="(item,index1) in arr" :key="index1"
						v-if="!isEmpty(item)">
						<div>{{item.name}}</div>
						<div class="flex-row align-center">
							<el-input v-model="item.value" :readonly="true" />
							<div class="ml-10">{{item.unit}}</div>
						</div>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import {
		getSns,
		getData
	} from "@/api/device/device";

	// 引入JOSN结构
	import {
		deviceOptions,
		defaultProps
	} from '@/structure/common.js';

	import {
		items
	} from '@/structure/realData.js';

	export default {
		name: "User",
		components: {
			Treeselect
		},
		computed: {
			items() { //将后台传过来的一维数组转为二维数组
				// const arr = [];
				// for (let i = 0; i < this.data.length; i += this.rowSize) {
				// 	arr.push(this.items.slice(i, i + this.rowSize));
				// }
				// return arr;
				const keys = Object.keys(this.dataList); // 获取data对象的所有键
				const arr = [];

				for (let i = 0; i < keys.length; i += this.rowSize) {
					arr.push(keys.slice(i, i + this.rowSize).map(key => this.dataList[key]));
				}

				return arr;
			}
		},
		data() {
			return {
				rowSize: 2, // 每行显示的元素个数
				interval: 10,
				currentNodeKey: "", //当前选中的节点
				deviceOptions: deviceOptions,
				defaultProps: defaultProps,
				dataList: items,
				timer: '',
			}
		},
		watch: {},
		created() {
			this.getSns()
		},
		onBeforeUnmount() {
			clearInterval(this.timer)
		},
		methods: {
			isEmpty(obj) {
				return obj === undefined || obj === null;
			},
			// 筛选节点
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			// 节点单击事件
			handleNodeClick(data) {
				// console.log("选中的节点data=" + JSON.stringify(data));
				//0表示我的设备根节点,1表示充电桩根节点,2,3类似
				if (data.id !== "0" && data.id !== "1" && data.id !== "2" && data.id !== "3") {
					this.currentNodeKey = data.id
				}
			},
			refresh() {
				this.getData()
			},
			startInterval() {
				console.log("开启定时器");
				clearInterval(this.timer)
				this.timer = setInterval(this.getData, parseInt(this.interval) * 1000);
			},
			/**
			 * 我的设备   ---> this.deviceOptions[0]
			 * --充电桩   ---> this.deviceOptions[0].children[0]
			 * --UPS     ---> this.deviceOptions[0].children[1]
			 * --逆变器   ---> this.deviceOptions[0].children[2]
			 * 
			 * 具体可参考common.js定义
			 */
			getSns() {
				getSns().then(res => {
					//获取之前先清空
					for (let i = 0; i < this.deviceOptions[0].length; i++) {
						for (let j = 0; j < this.deviceOptions[0].children[i].length; j++) {
							if (!this.deviceOptions[0].children[i].children) {
								break;
							}
							this.deviceOptions[0].children[i].children = []
						}
					}
					//赋值
					for (let i = 0; i < res.data.length; i++) {
						if (!this.deviceOptions[0].children[i]) {
							break;
						}
						for (let j = 0; j < res.data[i].length; j++) {
							if (!this.deviceOptions[0].children[i].children) {
								break;
							}
							this.deviceOptions[0].children[i].children.push({
								id: res.data[i][j],
								label: res.data[i][j]
							})
						}
					}

					if (this.deviceOptions[0].children[0].children[0].id) {
						this.currentNodeKey = this.deviceOptions[0].children[0].children[0].id

						this.$nextTick(() => {
							this.$refs.tree.setCurrentKey(this.currentNodeKey)
						})
						this.getData()
					}
				});
			},
			//获取实时数据
			getData() {
				if (!this.currentNodeKey) {
					return
					console.log("this.currentNodeKey=" + this.currentNodeKey);
				}
				// console.log("获取实时数据");
				getData(this.currentNodeKey).then(res => {
					console.log("getData 函数返回 res.data=" + JSON.stringify(res.data));
					// this.dataList = res.data;

					const keys = Object.keys(res.data);

					keys.forEach(key => {
						for (var i = 0; i < this.dataList.length; i++) {
							if (this.dataList[i].prop === key) {
								this.dataList[i].value = res.data[key];
								break;
							}
						}
					});

				});
			}
		}
	};
</script>